<div class="multiselect-container" appClickOutside (clickOutside)="hideOptions = true">
    <div class="show_items" (click)="displayPerTree()">
        <img *ngIf="selectionMode == 'orgUnit'" src="assets/icons/tree.png" class="group-image">
        <img *ngIf="selectionMode == 'Level'" src="assets/icons/level.png" class="group-image">
        <img *ngIf="selectionMode == 'Group'" src="assets/icons/group.png" class="group-image">
        <span *ngIf="selected_items.length == 1">{{ prefix }}</span>
        <span *ngIf="selected_items.length > 1">{{ prefix_multiple }}</span>
        <span *ngIf="selected_items.length > 3">
      <span class="selected-item">
        {{ selected_items[0].name }}
        <a (click)="deActivateNode(selected_items[0],$event)" class="removeitem" >x</a>
      </span>
        <span class="selected-item">
        {{ selected_items[1].name }}
        <a (click)="deActivateNode(selected_items[1],$event)" class="removeitem">x</a>
      </span>
        <span class="selected-item">
        &nbsp; and {{ selected_items.length - 2 }} more
      </span>
        </span>
        <span *ngIf="selected_items.length <= 3">
       <span *ngFor="let item of selected_items" class="selected-item ng-binding ng-scope">
        {{ item.name }}
         <a (click)="deActivateNode(item,$event)" class="removeitem">x</a>
      </span>
        </span>
        <span *ngIf="selected_items.length == 0">
      {{ placeholder }}
    </span>
        <img src="assets/icons/arrow-down.png" class="float-right" style="height: 15px; padding-top: 5px; padding-left: 5px;" alt="">
    </div>
    <ul class="item-list" *ngIf="!hideOptions">
        <li *ngFor="let item of items" class="period" (click)="selectItem(item, $event)" [ngClass]="{'selected': checkItemAvailabilty(item,selected_items)}" title="Click to select">
            {{ item.name }}
        </li>
    </ul>

</div>